<template>
  <div>
    <Vue3JsonEditor
      v-model="queryJson"
      :show-btns="false"
      :expandedOnStart="true"
      @json-change="onJsonChange"
      @mode-change="onModeChange"
    />
  </div>
</template>
<script lang="ts" setup>
import { Vue3JsonEditor } from 'vue3-json-editor'
const queryJson = defineModel({ default: [] })
function onJsonChange(value) {
  console.log('value:', value)
}

function onModeChange(value) {
  console.log('value:', value)
}
</script>
<style scoped>
:deep(.jsoneditor-outer > div) {
  height: 75vh !important;
}
</style>
